<template>
	<view class="projectDetails">
		<view class="projectDetails-header">
			<image class="projectDetails-header-bg"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/compang-details-bg.png"
				mode=""></image>
			<view class="projectDetails-header-content ff-bg-fff ff-border-radius-10">
				<view class="ff-font-16 ff-font-weight-600 ff-color-000">{{ projectDetailsInfo.assessName }}</view>
				<view class="ff-align-items-one ff-flex-wrap">
					<view class="ff-margin-right-10">
						<view v-if="projectDetailsInfo.assessStatus == 1" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;已发布
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 2" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;已响应
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 3" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;待指派
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 11" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;待评估
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 4" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;评估中
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 5" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;待提交
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 6" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;待审核
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 7" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;待签发
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 8" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;已驳回
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 9" class="tips1 ff-font-12">评估状态&nbsp;|&nbsp;已完成
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 10" class="tips5 ff-font-12">评估状态&nbsp;|&nbsp;已解约
						</view>
						<view v-if="projectDetailsInfo.assessStatus == 12" class="tips5 ff-font-12">评估状态&nbsp;|&nbsp;已作废
						</view>
					</view>
					<view v-if="projectDetailsInfo.rescissionStatus == 1"
						class="tips4 ff-color-fff ff-font-12 ff-margin-right-10">解约确认中</view>
				</view>
				<view class="ff-font-13 projectDetails-header-content-address">
					技术服务机构：{{ projectDetailsInfo.orgName || '/' }}</view>
				<view class="ff-font-13 projectDetails-header-content-time">
					更新于：{{ projectDetailsInfo.modified == null ? '/' : projectDetailsInfo.modified.substr(0, projectDetailsInfo.modified.length - 3) }}
				</view>
				<view
					:class="{ oneBUt: projectDetailsInfo.rescissionStatus !== 0 && projectDetailsInfo.rescissionStatus !== 1 && projectDetailsInfo.rescissionStatus !== 2 }"
					class="projectDetails-header-content-but ff-flex-around ff-margin-top-20 ff-margin-bottom-5">
					<u-button v-if="projectDetailsInfo.rescissionStatus == 0" @click="rescindClick" type="primary"
						size="medium" plain>解约合同</u-button>
					<u-button v-if="projectDetailsInfo.rescissionStatus == 1" @click="cancelRescindClick" size="medium"
						plain>取消解约</u-button>
					<!-- <u-button v-if="projectDetailsInfo.rescissionStatus == 1" size="medium" plain>已发起解约</u-button> -->
					<u-button v-if="projectDetailsInfo.rescissionStatus == 2" size="medium" plain>解约完成</u-button>
					<u-button @click="detailsClick" type="primary" size="medium">查看项目详情</u-button>
				</view>
				<view v-if="projectDetailsInfo.rescissionStatus == 1"
					class="projectDetails-header-content-noResult ff-align-items-one ff-font-13 ff-line-height-1-3 ff-border-radius-6 ff-padding-10">
					<view><u-icon name="info-circle" color="#FF0000" size="43"></u-icon></view>
					<view class="ff-margin-left-5">您已申请解约合同，需要对方同意。如有问题，请联系对方负责人！</view>
				</view>
			</view>
		</view>
		<!-- 解约状态(0:未解约 1:解约确认中 2:解约完成) -->
		<view class="projectDetails-content ff-bg-fff ff-border-radius-10" :class="{
				contentTop: projectDetailsInfo.rescissionStatus == 101,
				contentTop1: projectDetailsInfo.rescissionStatus == 11,
				contentTop2: projectDetailsInfo.rescissionStatus == 1
			}">
			<view class="projectDetails-content-title ff-font-16 ff-font-weight-600 ff-color-111 ff-margin-bottom-16">
				评估记录</view>
			<view>
				<u-time-line>
					<u-time-line-item nodeTop="7">
						<template v-slot:content>
							<view>
								<view class="ff-margin-bottom-15 reportTime ff-font-13">
									开始时间：{{ projectDetailsInfo.startTime != null ? projectDetailsInfo.startTime : '/' }}
								</view>
								<view v-if="projectDetailsInfo.assessStatus == 9" class="reportBut ff-margin-bottom-18">
									<u-button @click.stop="vieWReport(projectDetailsInfo)" type="warning" size="medium"
										plain>查看报告书</u-button>
								</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item nodeTop="7">
						<template v-slot:content>
							<view>
								<view class="reportTime ff-font-13">
									<text class="ff-margin-right-5">响应成功：</text>
									{{ projectDetailsInfo.contractTime }}
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
		<!-- 解约合同弹框 -->
		<u-modal v-model="rescindModal" show-cancel-button="true" @confirm="rescindConfirm" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="请确认是否解约合同？" />
		<!-- 取消解约合同弹框 -->
		<u-modal v-model="cancelRescindModal" show-cancel-button="true" @confirm="cancelRescindConfirm" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="请确认是否取消解约合同？" />
		<!-- 报告书弹框 -->
		<u-modal v-model="reportModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="报告书正在生成，请稍后查看!" />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'projectMaintenanceRecord',
		data() {
			return {
				locationModal: false, // 定位失败弹框显/隐
				rescindModal: false, // 解约弹框显/隐
				reportModal: false, // 报告书弹框显/隐
				cancelRescindModal: false, // 取消解约弹框显/隐
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				// 获取项目详情页请求的参数
				params: {
					assessId: '',
					longitude: '',
					latitude: ''
				},
				projectDetailsInfo: {} // 项目详情页数据
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			let that = this;
			that.params.assessId = e.id;
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log('当前位置的经度-----：', res);
					that.params.latitude = res.latitude;
					that.params.longitude = res.longitude;
					that.getprojectDetails(); // 获取项目详情页数据
				},
				fail(error) {
					// console.log('位置定位失败返回----', error);
					that.locationModal = true;
				}
			});
		},
		methods: {
			// 获取项目详情页数据
			async getprojectDetails() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: '/bsAssessProjectInfo/user/detail',
					data: this.params
				});
				// console.log('获取项目详情页数据------', data);
				if (data.code == 200) {
					this.projectDetailsInfo = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 解约合同
			rescindClick() {
				this.rescindModal = true;
			},
			// 解约合同（确认）
			async rescindConfirm() {
				this.$refs.loading.openLoading('解约中···');
				const data = await this.$http.post({
					url: `/bsAssessProjectInfo/rescission/${this.projectDetailsInfo.assessId}`
				});
				// console.log('解约合同（确认）-----', data);
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					this.getprojectDetails(); // 获取项目详情页数据
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 取消解约合同
			cancelRescindClick() {
				this.cancelRescindModal = true;
			},
			// 取消解约合同（确认）
			async cancelRescindConfirm() {
				this.$refs.loading.openLoading('解约中···');
				const data = await this.$http.post({
					url: `/bsAssessProjectInfo/cancelRescission/${this.projectDetailsInfo.assessId}`
				});
				// console.log('取消解约合同（确认）-----', data);
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					this.getprojectDetails(); // 获取项目详情页数据
				}
				this.$refs.loading.closeLoading();
			},
			// 跳转详细的项目详情页数据
			detailsClick() {
				this.$pageJump.navigateTo('/pages/assessment/company/home/components/details/projectDetails?id=' + this
					.projectDetailsInfo.assessId);
			},
			// 跳转到报告书页面
			vieWReport(item) {
				if (item.reportQrcodeUrl != '' && item.reportQrcodeUrl != null) {
					this.$pageJump.navigateTo('/pages/assessment/company/home/components/details/Report?id=' + item
						.assessId);
				} else {
					this.reportModal = true; // 提示无法查看报告书
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	@import './components/projectDetails.scss';

	.oneBUt {
		/deep/.u-btn--primary {
			padding: 0 180rpx !important;
		}
	}

	.projectDetails {
		&-header {
			position: inherit !important;
			padding: 30rpx 0;

			&-content {
				margin: 0 24rpx 30rpx;

				&-but {
					/deep/.u-size-medium {
						font-size: 26rpx;
						height: 75rpx;
						line-height: 75rpx;
						letter-spacing: 3rpx;
					}
				}

				&-noResult {
					margin-top: 30rpx !important;
					background-color: #ffebeb;
					color: #ff0000;
				}
			}
		}
	}

	.contentTop {
		margin: 615rpx 24rpx 80rpx !important;
	}

	.contentTop1 {
		margin: 465rpx 24rpx 80rpx !important;
	}

	.contentTop2 {
		margin: 547rpx 24rpx 80rpx !important;
	}

	.projectDetails-content {
		// height: 600rpx;
		overflow-y: auto;
		margin: -30rpx 24rpx 80rpx;
		padding: 30rpx 40rpx;

		/deep/.u-time-axis.data-v-bd98783e::before {
			border-left: 1px dashed #b5b5b5 !important;
		}

		/deep/.u-dot.data-v-dba4c432 {
			background: #b5b5b5;
		}

		.reportTime {
			color: #aaaaaa;
		}

		.reportBut {
			/deep/.u-btn--warning--plain.data-v-3bf2dba7 {
				color: #3178ff !important;
				border-color: #3178ff !important;
				background-color: #f5f8ff !important;
			}
		}
	}

	// x,xs
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.projectDetails-content {
			// height: 700rpx;
		}
	}

	// xr
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
		.projectDetails-content {
			// height: 700rpx;
		}
	}

	// xs max
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
		.projectDetails-content {
			// height: 700rpx;
		}
	}
</style>